<template>
	<div>
		<h3>企业秀</h3>
		<el-form-item label="分享链接" style="margin-top:20px;" label-width="70px">
			<el-input :disabled="disabledt" style="width:200px;" v-model="urllink"></el-input>
			<el-button :data-clipboard-text="urllink" @click="copy" style="margin-left:10px;" id="copy-text">复制链接</el-button>
		</el-form-item>
		<!-- <el-form-itm> -->
			<div id="qrcode" style="margin-left:0px;"> </div>
		<!-- </el-form-itm> -->
		<h3 style="margin-top:20px;">显示设置</h3>
		<div style="margin-top:10px; display: inline-block;width:600px;">
			<div style="width:150px;margin-left:20px;margin-top:10px;display:inline-block;">
				<el-switch
			  v-model="showcompanyres.showCertificate"
			  active-text=""
			  @change="submitchange"
			  inactive-text="显示证书">
			</el-switch>
			</div>
			<div style="width:150px;margin-left:20px;margin-top:10px;display:inline-block;">
			<el-switch
			@change="submitchange"
			  v-model="showcompanyres.showWeather"
			  active-text=""
			  inactive-text="显示证天气数据">
			</el-switch>
			</div>
			<div style="width:150px;margin-left:20px;margin-top:10px;display:inline-block;">
			<el-switch
		@change="submitchange"
			  v-model="showcompanyres.showBaseSoil"
			  active-text=""
			  inactive-text="显示基地信息">
			</el-switch>
			</div>
			<div style="width:150px;margin-left:20px;margin-top:10px;display:inline-block;">
			<el-switch
			@change="submitchange"
			  v-model="showcompanyres.showCompany"
			  active-text=""
			  inactive-text="显示企业介绍">
			</el-switch>
			</div>
			<div style="width:150px;margin-left:20px;margin-top:10px;display:inline-block;">
			<el-switch
			@change="submitchange"
			  v-model="showcompanyres.showProduct"
			  active-text=""
			  inactive-text="显示产品介绍">
			</el-switch>
			</div>
			<div style="width:150px;margin-left:20px;margin-top:10px;display:inline-block;">
			<el-switch
			@change="submitchange"
			v-model="showcompanyres.showContact"
			  active-text=""
			  inactive-text="显示联系方式	">
			</el-switch>
			</div>
			<div style="width:150px;margin-left:20px;margin-top:10px;display:inline-block;">
			<el-switch
			@change="submitchange"
			  v-model="showcompanyres.showVideo"
			  active-text=""
			  inactive-text="显示监控视频">
			</el-switch>
			</div>
		</div>


		<div style="width:400px;height:800px;position: absolute;top:30px;right:50px;">

			  <iframe class="iframe" :src="urllink" width="100%" height="100%" frameborder="0" />
		    <!-- </div> -->
		</div>
	</div>
</template>

<script>
	import {company_findById,company_update,conpanyshow_load,conpanyshow_update} from "@/request/api";
	import Clipboard from 'clipboard';
	export default{
		inject:['reload'],
		data(){
			return{
				disabledt:true,
				urllink: '',
				showcompanyres:{
					showWeather:true,
					showBaseSoil:true,
					showCompany:true,
					showProduct:true,
					showContact:true,
					showVideo:true,
					showCertificate:true,
				},

			}
		},
		mounted(){
			let ids = localStorage.getItem("companyId")
			this.urllink = "http://124.89.83.30:90/xls/scan/company.html?code=4028814b89ae9d99018acf7d745c0031"
			this.creatQrCode()
			this.getcompanyshow()
		},
		methods:{
			creatQrCode() {
				let qrcode = new QRCode('qrcode', {
					width: 124,
					height: 124,        // 高度
					text:  this.urllink,   // 二维码内容
					// render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
					background: '#fff',   // 背景色
					foreground: '#ff0'    // 前景色
				})
			},

			submitchange(){
				let id = localStorage.getItem("companyId")
				// console.log(id)
				this.showcompanyres.companyId = id
				this.showcompanyres.code = id
				let data = this.showcompanyres
				console.log(data)
				conpanyshow_update(data).then((res)=>{
					this.getcompanyshow()
					// this.reload()
					this.reload()
					// console.log("组件刷新了")
				})
			},
			getcompanyshow(){

				let id = localStorage.getItem("companyId")
				// console.log(id)
				conpanyshow_load(id).then((res)=>{
					console.log(res)
					if(res.data != null){
						this.showcompanyres = res.data
					}


				})
			},
			copy(){
				var _this = this;
				var clipboard = new Clipboard("#copy-text")
				clipboard.on('success', e => {
				// alert("dd")
				// 释放内存
				clipboard.destroy()
				})
				clipboard.on('error', e => {
				// 不支持复制
				Message({
				message: '该浏览器不支持自动复制',
				type: 'warning'
				});
				// 释放内存
				clipboard.destroy()
				})
			},
		}
	}
</script>

<style>

</style>
